import React, { useEffect, useRef } from "react"
import { useEditorContext } from "@/context/editContext"
import { Box } from "@mui/system"
import { Form, FormInstance, message, Typography } from "antd"
import { AForm, AFormItem, WxUploader } from "aling"
import { ImageUploader, Input, Radio, TextArea, Button } from "antd-mobile"
import { useRequest } from "ahooks"
import { updateUser } from "@/services"
import useAppSource from "@/hooks/useAppSource"
export default () => {
  const [{ userInfo }, dispatch] = useEditorContext()

  const [SourceBadge] = useAppSource()
  const form = useRef<{ instance: FormInstance }>(null)
  const formavatar = Form.useWatch("avatar", form.current?.instance)

  const { runAsync: runUpdate, loading: updataLoading } = useRequest(
    updateUser,
    {
      manual: true,
      onSuccess(data, params) {
        message.success("操作成功！")
      },
    },
  )
  useEffect(() => {
    const a = {
      ...userInfo,
      avatar: userInfo?.avatar?.map(
        (item: string) =>
          window.alignConfig.blogSourceMinio + "/avatar/" + `${item}`,
      ),
    }
    form.current &&
      form.current.instance?.setFieldsValue({
        ...userInfo,
        avatar:
          userInfo?.avatar?.map(
            (item: string) =>
              window.alignConfig.blogSourceMinio + "/avatar/" + `${item}`,
          ) || void 0,
      })
  }, [userInfo])
  return (
    <Box sx={{ p: 2, height: "100vh", backgroundColor: "white" }}>
      <Box sx={{ mb: 1, fontWeight: 600, fontSize: 16 }}>基本信息</Box>
      <Box>
        <AForm
          ref={form}
          layout="vertical"
          initialValues={userInfo}
          onSubmit={(value) => {
            runUpdate({
              ...value,
              avatar: value.avatar?.map(
                (item: any) =>
                  item?.response || item?.split("/")?.slice(-1)?.[0],
              ),
            })
          }}
          footerOptions={{
            okButton: { loading: updataLoading, children: "更新" },
            cancelButton: {
              style: {
                display: "none",
              },
            },
          }}
        >
          <AFormItem name={"avatar"} label={"头像"}>
            <WxUploader
              sx={{
                ".adm-image-img": {
                  objectFit: "cover!important",
                },
              }}
              action={"/api/upload/image"}
              beforeUpload={(file, fileList) => {
                console.log(file, fileList)
              }}
              maxCount={1}
              accept="image/*"
            ></WxUploader>
            {/* <SourceBadge
              hidden={formavatar?.length}
              onOk={(data) => {
                form.current!.instance?.setFieldValue(
                  "avatar",
                  data?.map(
                    (item: string) =>
                      window.alignConfig.blogSourceMinio +
                      "/avatar/" +
                      `${item}`,
                  ) || void 0,
                )
              }}
              offset={[20, 65]}
            >
              <WxUploader
                sx={{
                  ".adm-image-img": {
                    objectFit: "cover!important",
                  },
                }}
                action={"/api/upload/image"}
                beforeUpload={(file, fileList) => {
                  console.log(file, fileList)
                }}
                maxCount={1}
                accept="image/*"
              ></WxUploader>
            </SourceBadge> */}
          </AFormItem>
          <AFormItem name={"username"} label={"用户名"}>
            <Input></Input>
          </AFormItem>
          <AFormItem name={"autograph"} label={"签名"}>
            <TextArea showCount></TextArea>
          </AFormItem>
          <AFormItem name={"gender"} label={"性别"}>
            <Radio.Group>
              <Radio value={"0"}>男</Radio>
              <Radio style={{ marginLeft: 16 }} value={"1"}>
                女
              </Radio>
            </Radio.Group>
          </AFormItem>
          <AFormItem
            name={"password"}
            disabled
            //initialValue={"********"}
            label={"密码"}
          >
            <Input type="password"></Input>
          </AFormItem>
        </AForm>
      </Box>
    </Box>
  )
}
